<template>
    <normal-layout page-index="1-1">
      <div>
        <el-input style="margin: 10px;width: 80%" v-model="searchName"></el-input>
        <el-button type="primary" @click="searchData">搜索客户</el-button>
        <el-button @click="handleNewCustomer" v-if="type==='2'">新增客户</el-button>
        <customer-table :customer-data="customerData"></customer-table>
        <!--新增客户dialog-->
        <el-dialog
          title="新增客户"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div>
            <el-form :model="addCustomer" label-position="left" label-width="30%">
              <el-form-item label="姓名">
                <el-input v-model="addCustomer.name" style="width: 90%"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio v-model="addCustomer.sex" label="f">男</el-radio>
                <el-radio v-model="addCustomer.sex" label="m">女</el-radio>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input-number v-model="addCustomer.age" style="width: 60%"></el-input-number>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="addCustomer.tel" style="width: 90%"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="newCustomer">确 定</el-button>
  </span>
        </el-dialog>
      </div>
    </normal-layout>
</template>

<script>
  import role from "assets/role"
  import NormalLayout from "../../layouts/NormalLayout";
  import CustomerTable from "../../components/Customer/CustomerTable";
  export default {
    name: "index",
    components: {CustomerTable, NormalLayout},
    data(){
      return{
        myrole:role.state.username,
        type:role.state.type,
        /*测试数据*/
        testData: [{
          cno: 'C20160502-01',
          name: '刘小贺',
          tel: '17801020390',
          address: '北京市北京交通大学主校区16号楼222',
          level: '5',
          state: '未购',
        },{
          cno: 'C20160502-01',
          name: '刘小贺',
          tel: '17801020390',
          address: '北京市北京交通大学主校区16号楼222',
          level: '5',
          state: '未购',
        },],
        /*客户数据*/
        customerData:[],
        /*新增客户*/
        addCustomer:{
          name:'',
          sex:'f',
          age:'18',
          tel:'',
          sno:'',
        },
        /*窗口可见*/
        dialogVisible:false,
        /*搜索内容*/
        searchName:''
      }
    },
    mounted() {
      this.addCustomer.sno=this.myrole;
      console.log(this.addCustomer.sno);
      this.getData()
    },
    methods:{
      /*打开新增客户页面*/
      handleNewCustomer(){
        this.addCustomer={};
        this.dialogVisible=true;
      },
      /*关闭新增客户页面*/
      handleClose(){
        this.dialogVisible=false;
      },
      /*处理新增客户*/
      async newCustomer(){
        if(this.addCustomer.name===''){
          alert('客户姓名不能为空');
        }
        if(this.addCustomer.sex===''){
          alert('客户姓名不能为空');
        }
        if(this.addCustomer.tel===''){
          alert('联系方式不能为空');
        }
        if(this.addCustomer.age===''){
          alert('客户年龄不能为空')
        }
        let data=this.addCustomer;
        console.log(data)
        const ip = await this.$axios.$post('/new_client',data);
        if (ip==='1'){
          this.$message({
            showClose: true,
            message: '新增客户成功',
            type: 'success'
          });
          this.handleClose();
        }else {
            this.$message({
              showClose: true,
              message: '新增客户失败',
              type: 'error'
            });
        }
        this.getData();
      },
      async getData(){
        let mydata=this.searchName
        const ip = await this.$axios.get('/get_customer_table');
        this.customerData=ip.data;
        console.log(ip);
        console.log(this.customerData);
      },
      async searchData(){
        let mydata={
          searchName:this.searchName
        }
        this.$axios.post('/get_customer_table',mydata).then((response) => {
          console.log(response.data)
          this.customerData=response.data;
        })
      }
    }
  }
</script>

<style scoped>

</style>
